<template>
  <div class="employees-container">
    <!-- <el-card style="margin: 10px">
      <div style="display:flex;justify-content:space-between">
        <div class="left"></div>
        <div class="right">right</div>
      </div>
    </el-card> -->
    <toolPage>
      <!-- <h1 slot="left">我是left</h1> -->
      <!-- <template #left>
        <h1>我是left</h1>
      </template> -->
      <template v-slot:left>
        <h1>我是left</h1>
      </template>

      <template #right>
        <!-- 绑定导出事件 -->
        <el-button
          v-arrow="'work'"
          type="primary"
          @click="handleDownload"
        >导出</el-button>
        <el-button
          type="primary"
          @click="$router.push('/employees/import')"
        >导入</el-button>
        <el-button type="primary" @click="add">+ 新增员工</el-button>
      </template>
    </toolPage>
    <hr>
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <!-- 序号 -->
        <el-table-column label="序号" width="150">
          <template slot-scope="scoped">
            {{ (page - 1) * size + 1 + scoped.$index }}
          </template>
        </el-table-column>
        <el-table-column sortable prop="username" label="姓名" width="120" />
        <el-table-column sortable prop="mobile" label="手机号" width="120" />
        <el-table-column sortable prop="workNumber" label="工号" width="120" />
        <el-table-column
          sortable
          prop="formOfEmployment"
          label="聘用形式"
          width="120"
        />
        <el-table-column
          sortable
          prop="departmentName"
          label="部门"
          width="120"
        />
        <el-table-column sortable label="入职时间" width="120">
          <template slot-scope="{ row }">
            {{ row.timeOfEntry | forMat('YYYY-MM-DD') }}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <!-- params 方法-->
            <!-- <el-button
              type="text"
              size="small"
              @click="
                $router.push({
                  name: 'details',
                  params: {
                    id: scope.row.id
                  }
                })
              "
            >查看</el-button> -->

            <!-- query方法 -->
            <el-button
              type="text"
              size="small"
              @click="
                $router.push({
                  name: 'details',
                  query: {
                    id: scope.row.id
                  }
                })
              "
            >查看</el-button>

            <!-- <el-button
              type="text"
              size="small"
              @click="$router.push('/employees/details?id=' + scope.row.id)"
            >查看</el-button> -->
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>

            <el-button
              type="text"
              size="small"
              @click="roleHandler(scope.row)"
            >角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :current-page.sync="page"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 新增员工对话框 -->
      <el-dialog
        title="新增员工"
        :visible.sync="dialogVisibleEmp"
        width="50%"
        @close="closeHandle"
      >
        <empDialog @success="success" />
      </el-dialog>
      <!-- 分配角色，对话框 -->
      <el-dialog
        title="分配角色"
        :visible.sync="dialogVisible"
        width="50%"
        @close="closeHandleRole"
      >
        <assignRole
          v-if="dialogVisible"
          :role-ids="userInfoById.roleIds"
          :user-id="userId"
          @success="dialogVisible = false"
        />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import assignRole from './assignRole.vue'
import { getEmployeeList } from '@/api/employees.js'
import empDialog from './empDialog.vue'
import { getUserDetailById } from '@/api/user'
export default {
  name: '',
  components: { empDialog, assignRole },
  data() {
    return {
      tableData: [],
      page: 1,
      size: 10,
      total: 1,
      dialogVisibleEmp: false,
      //   分配角色
      dialogVisible: false,
      tHeader: [],
      userInfoById: {},
      userId: ''
    }
  },
  computed: {},
  created() {
    this.getEmp()
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    async getEmp() {
      const res = await getEmployeeList(this.page, this.size)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    /* 分页 */
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getEmp()
    },
    add() {
      this.dialogVisibleEmp = true
    },
    closeHandle() {
      // 关闭对话框
    },
    // 关闭对话框，刷新页面
    success() {
      this.dialogVisibleEmp = false
      this.getEmp()
    },
    // 导出文件模块
    async handleDownload() {
      // 获取全部的数据
      const res = await getEmployeeList(this.page, this.total)
      console.log(res, 11)
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then((excel) => {
        // const list = this.tableData // 一维数组
        // 赋值全部的数据
        const list = res.data.rows // 一维数组
        const data = this.formatJson(list) // 二维数组
        console.log(data)
        excel.export_json_to_excel({
          // 多表头
          multiHeader: [
            ['a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e'],
            ['a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e']
          ],
          //   表头合并 整列合并 - 先合并单列的行，例如C4:C29，D4:D29，最后合并两列C4:D4
          merges: ['A1:E1', 'C4:C29', 'D4:D29', 'C4:D4'],
          header: this.tHeader, // 表头
          data, // 导出的数据
          filename: '文件名', // 文件名
          autoWidth: true, // 宽度自适应
          bookType: 'xlsx' // 导出文件后缀
        })
        this.downloadLoading = false
      })
    },
    formatJson(list) {
      // 返回一个二维数组
      const map = {
        id: '编号',
        password: '密码',
        mobile: '手机号',
        username: '姓名',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        correctionTime: '转正日期',
        workNumber: '工号',
        departmentName: '部门',
        staffPhoto: '头像地址'
      }
      // 拿到表头的数据
      this.tHeader = Object.values(map)
      return list.map((item) => {
        // 收集所有数据
        var obj = {}
        // 获取英文
        var enKey = Object.keys(map)
        for (var key of enKey) {
          obj[map[key]] = item[key]
          //   console.log(obj)
        }
        var vals = Object.values(obj)
        // console.log(vals)
        return vals
      })
    },
    // 分配角色
    roleHandler(row) {
      // 显示对话框
      this.dialogVisible = true
      this.getInfo(row.id)
      this.userId = row.id
    },
    closeHandleRole() {},
    // 获取用户信息,根据id
    async getInfo(id) {
      const res = await getUserDetailById(id)
      console.log(res)
      this.userInfoById = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.employees-container {
  padding: 20px 30px;
}
</style>
